<script setup lang="ts">
import { getAllMenuApi,  removeMenuApi } from "@/api/menu";
import { onMounted, ref, resolveComponent } from "vue";
import MenuForm from "./component/MenuForm.vue";
const tableData = ref([]);
const MenuFormRef = ref();
const params = ref({
  title: "",
});

const menuData = ref<any>([]);
// 获取数据
const getTableData = async () => {
  const res = await getAllMenuApi(params.value);
  tableData.value = res;
  // console.log(res);

  const MenuTree = (menu: any) => {
    return menu.map((item: any) => {
      return {
        value: item.id,
        label: item.meta.title,
        children:
          item?.children && item.children?.length
            ? MenuTree(item.children)
            : [],
      };
    });
  };

  menuData.value = MenuTree(res);
};

onMounted(() => {
  getTableData();
});

const saveDrawer = () => {
  // console.log(row);
  // console.log(MenuFormRef.value);
  MenuFormRef.value.open();
  // drawer.value = true;
};

const editDrawer = (row: any) => {
  MenuFormRef.value.open(row);
};

const removeMenu = async (data: any) => {
  // console.log(data.row);
  await removeMenuApi(data.row);
  getTableData();
};

const iconRender = (icon: string) => {
  try {
    if (!icon) {
      return null;
    }
    console.log(icon);
    return resolveComponent(icon);
  } catch {
    return null;
  }
};
</script>

<template>
  <div>
    <MenuForm :update="getTableData" ref="MenuFormRef" :menuData="menuData" />
    <h1>菜单</h1>
    <div
      class="table-top"
      style="display: flex; justify-content: space-between"
    >
      <div class="left">
        <el-button type="primary" size="small" @click="saveDrawer()"
          >添加</el-button
        >
        <el-button type="default" size="small" @click="getTableData"
          >刷新</el-button
        >
      </div>
      <div class="right">
        <el-input v-model="params.title" />
      </div>
    </div>

    <el-table
      :data="tableData"
      row-key="id"
      border
      style="width: 100%; margin-bottom: 20px"
      default-expand-all
    >
      <el-table-column width="65" />
      <el-table-column prop="title" label="菜单标题" width="140">
        <template #default="scope">
          <el-tag>{{ scope.row.meta.title }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="icon" label="图标">
        <template #default="scope">
          <el-tag>
            <i v-if="!iconRender(scope.row.meta?.icon)">{{
              scope.row.meta?.icon
            }}</i>
            <template v-else>
              <el-icon v-if="scope.row.meta?.icon">
                <component :is="scope.row.meta?.icon" />
              </el-icon>
              <template v-else>暂无</template>
            </template>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isHidden" label="是否隐藏">
        <template #default="scope">
          <el-tag>
            {{ scope.row.meta.isHidden === "0" ? "否" : "是" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="150">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="removeMenu(scope)"
            sortable
            >删除</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="editDrawer(scope.row)"
            sortable
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped lang="less">
.table-top-btn {
  margin: 5px 20px;
}
</style>
